<template>
    <div class="like">
        <Card>
            <span>猜你喜欢</span>
        </Card>
        <ul>
            <li v-for="(item,index) of likeList" :key="index" @click="goDetail(item.id)">
                <h2>
                    <img v-lazy="item.imgUrl" alt="">
                </h2>
                <h3>{{item.name}}</h3>
                <div>
                    <span>¥</span>
                    <b>{{item.price}}</b>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import Card from "./Card.vue";
export default {
    props:{
        likeList:Array
    },
    components: {
        Card
    },
    data () {
        return {
            
        }
    },
    computed: {},
    watch: {},
    methods: {
        goDetail(id){
            this.$router.push({name:'detail',query:{id}})
        }
    },
    created () {},
    mounted () {},
    beforeCreate () {},
    beforeMount () {},
    beforeUpdate () {},
    updated () {},
    beforeDestroy () {},
    destroyed () {},
    activated () {}
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.like{
    ul{
        display: flex;
        flex-wrap: wrap;
        li{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 50%;
            h2{
                img{
                    width: 4.6933rem;
                    height: 4.6933rem;
                }
            }
            h3{
                box-sizing: border-box;
                padding: 0 .16rem;
                width: 100%;
                color: #222;
                font-size: .3733rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-weight: 400;
            }
            div{
                box-sizing: border-box;
                width: 100%;
                text-align: left;
                padding: .16rem;
                color: #ff0000;
                span{
                    font-size: .32rem;
                }
                b{
                    font-size: .4267rem;
                    font-weight: 600;
                }
            }
        }
    }
}
</style>
